<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <title>示例接口</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../stylesheets/theme.css">
    <link rel="stylesheet"                 href="../lib/font-awesome/css/font-awesome.css">
    <script                                src="../lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <!-- Demo page code -->

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
        .errorAlert{
        	color: #f00;
            font-weight: bold;
        }
        #tbDiv1{
        	padding-left:16px;
        }
        #stat-widget-container1 {
		  text-align: center;
		  margin-bottom: 1em;
		}
		#myTabContentDiv{
			padding:20px;
			border-left:1px solid #dddddd;
			border-right:1px solid #dddddd;
			border-bottom:1px solid #dddddd;
			margin-top:-20px;
		}
	
		#firstTab{
			height:0px;
		}
		#secondTab{
			height:0px;
		}
		
		
    </style>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
  <!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
  <!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!--> 
  <body class=""> 
  <!--<![endif]-->
    <!-- 这里放置的是上边的标题栏 -->
    <div class="navbar">
        <div th:replace="part/navbar"></div>
    </div>

    <!-- 这里放置的是左边的导航栏 -->
    <div class="sidebar-nav">
        <div th:replace="part/sidebar"></div>
    </div>
    
    <div class="content">
        
        <!-- 标题在此 -->
        <div class="header">
            <h1 class="page-title">示例接口</h1>
        </div>
        
        <!-- 页面路径在此 -->
        <ul class="breadcrumb">
            <li><a href="index.html">Home</a> <span class="divider">/</span></li>
            <li class="active">Sample interface</li>
        </ul>

        <div class="container-fluid">
            <div class="row-fluid">
					<div class="tab-pane active in" id="profile">
						<!-- 这个div内部就是页面主要内容 -->
					
						<div class="block">
					        <div id="page-stats" class="block-body collapse in">
					
					            <div id="stat-widget-container1">
									<table border="0" width="100%" height="100%">
										<tr>
											<td width="132px" height="132px" valign="middle">
												<img src='../images/interface-sample-128.gif' width="128" height="128"/>
											</td>
											<td>
												<div id="tbDiv1" padding-left:"">
													<table width="100%" height="100%">
														<tr>
															<td align="left" colspan="2"><B><font size="6">示例接口说明</font></B></td>
														</tr>
														<tr>
															<td align="left" colspan="2">&nbsp;</td>
														</tr>
														<tr>
															<td align="left" width="80"><B><font size="3">描述:</font></B></td>
															<td align="left"><font size="3">本接口意在给用户提供一个简单、不受限、易上手实操的样例，降低用户的学习坡度，熟悉后能易于上手其它接口。</font></td>
														</tr>
														<tr>
															<td align="left"><B><font size="3">接口ID:</font></B></td>
															<td align="left"><font size="3">8972</font></td>
														</tr>
														<tr>
															<td align="left"><B><font size="3">价格:</font></B></td>
															<td align="left"><font size="3">完全免费不受限，申请后立即生效. </font></td>
														</tr>
														<tr>
															<td align="left"><B><font size="3">热度:</font></B></td>
															<td align="left"><font size="3">近 <font color="navy">30</font> 天申请 <font color="navy">168</font> 次。如有疑问请咨询客服:<font color="red">800-688-9786</font></font></td>
														</tr>
													</table>
												</div>
											</td>
											<td width="132px" height="132px">
												<a href="#" class="btn btn-info">申请接口</a>
											</td>
										</tr>
									</table>
					            </div>
					        </div>
					    </div>
					    
					    <!-- 选项卡 -->
			            <div class="well">
						    <ul class="nav nav-tabs">
						      <li id="firstTabLi" class="active">
						      	<a href="javascript:showTab('firstTab')" data-toggle="tab">接口信息</a>
						      </li>
						      
						      <li id="secondTabLi" >
						      <a href="javascript:showTab('secondTab')" data-toggle="tab">错误代码</a>
						      </li>
						      
						      <li id="thirdTabLi" >
						      <a href="javascript:showTab('thirdTab')" data-toggle="tab">示例代码</a>
						      </li>
						      
						      <li id="fourthTabLi" >
						      <a href="javascript:showTab('fourthTab')" data-toggle="tab">接口文档</a>
						      </li>
						      
						      <li id="fifthTabLi" >
						      <a href="javascript:showTab('fifthTab')" data-toggle="tab">升级版本</a>
						      </li>
						      
						    </ul>
						    <div id="myTabContentDiv" class="">
						    
						    <!-- 第一选项卡 -->
						    <div class="tab-pane active in" id="firstTab">
						        <table width="100%" height="100%">
									<tr>
										<td align="left" colspan="2"><B><font size="4">基本信息</font></B></td>
									</tr>
									<tr>
										<td align="left" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="left" width="80"><B><font size="3">接口地址:</font></B></td>
										<td align="left"><font size="3" color='navy'>http://localhost:8080/mediacool/interface/gotoSample#profile</font></td>
									</tr>
									<tr>
										<td align="left" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="left"><B><font size="3">请求方式:</font></B></td>
										<td align="left"><font size="3" color='navy'>GET</font></td>
									</tr>
									<tr>
										<td align="left" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="left"><B><font size="3">返回格式:</font></B></td>
										<td align="left"><font size="3" color='navy'>JSON</font></td>
									</tr>
									<tr>
										<td align="left" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="left" width="80"><B><font size="3">请求示例:</font></B></td>
										<td align="left"><font size="3" color='navy'>https://blog.csdn.net/chengqiuming/article/details/100147057</font></td>
									</tr>
								</table>
						    </div>
						    
						   <!-- 第二选项卡 -->  
						   <div class="tab-pane fade" id="secondTab">
						      <table width="100%" height="100%">
									<tr>
										<td align="left" colspan="2" width="100%"><B><font size="4">错误代码</font></B></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">代码</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">说明</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">0</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">请求成功</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">30000</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">无数据</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">30001</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">请求失败</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">30002</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">访问频率过快</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">30003</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">无权限</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">30004</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">账号失效</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
									<tr>
										<td align="center" width="50%" style="background-color:#f5f2eb"><B><font size="3">30005</font></B></td>
										<td align="center" width="50%" style="background-color:#f5f2eb"><font size="3">被管理员屏蔽</font></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
								</table>
						   </div>
						    
						   <!-- 第三选项卡 -->  
						   <div class="tab-pane fade" id="thirdTab">
						       <table width="100%" height="100%">
									<tr>
										<td align="left" colspan="2" width="100%"><B><font size="4">示例代码</font></B></td>
									</tr>
									<tr>
										<td align="center" colspan="2">&nbsp;</td>
									</tr>
								</table>
<pre>
package com.hy.myapp;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {
	public static void main(String[] args) {
		SpringApplication.run(MyApplication.class, args);
	}
}
</pre>
						   </div>
						   
						   <!-- 第四选项卡 -->  
						   <div class="tab-pane fade" id="fourthTab">
						       第四选项卡
						   </div>
						   
						   <!-- 第五选项卡 -->  
						   <div class="tab-pane fade" id="fifthTab">
						       第五选项卡
						   </div>
						    
						  </div>
						
						</div>
				    </div>

                    <!-- 这里放置的是页脚部分 -->
                    <footer>
						<div th:replace="part/footer"></div>
                    </footer>
                    
            </div>
        </div>
    </div>
    
    <!-- 这部分是进行菜单设置的 -->
    <script type="text/javascript">
    	chooseSiderbar("accounts-menu",2);
    	
    	function showTab(tabId){

    		var arr=["firstTab","secondTab","thirdTab","fourthTab","fifthTab"];
    		for(var i=0;i<arr.length;i++){
    		    var id=arr[i];
    			if(id==tabId){
    				document.getElementById(id).className="tab-pane active in";
    			}else{
    				document.getElementById(id).className="tab-pane fade";
    			}
    		}
    		
 		
    		var liId=tabId+"Li";
    		var arrLis=["firstTabLi","secondTabLi","thirdTabLi","fourthTabLi","fifthTabLi"];
    		
    		for(var i=0;i<arrLis.length;i++){
    		    var id=arrLis[i];
    			if(id==liId){
    				document.getElementById(id).className="active";
    			}else{
    				document.getElementById(id).className="";
    			}
    		}
    	}
    </script>
    
  </body>
</html>


